<template>
	<view>
		<view class="kfym">
			<view class="ltk">
				<view class="lltk">
					<view>客服</view>
					<view v-if="hflist.length>0">
						<view v-for="(item,index) in hflist" :key="index">客服:{{item}}</view>
					</view>
					<view v-else>还没有发送内容不回复</view>
				</view>
				<view class="rltk">
					<view>我的</view>
					<view v-if="list.length>0">
						<view v-for="(item,index) in list" :key="index">我:{{item}}</view>
					</view>
					<view v-else>还没有发送内容</view>
					<audio :src="lywj" controls></audio>
				</view>
			</view>
			<view class="yyk" :style="{display: yykk ? 'block':'none'} ">
				<button @tap="startRecord">开始录音</button>
				<button @tap="endRecord">停止录音</button>
				<button @tap="playVoice">播放录音</button>
			</view>
			<button class="fsyy" @click="fsyy">发送语音</button>
			<view class="srk">
				<input type="text" placeholder="请输入内容" v-model="msg" />
				<button @click="fs">发送</button>
				<button @click="qk">清空</button>
				<button @click="ly">语音</button>
			</view>

		</view>

	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();

	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				msg: "",
				list: [],
				hflist: [],
				yykk: false,
				text: 'uni-app',
				voicePath: '',
				lywj: ""
			};
		},
		methods: {
			fsyy() {
				console.log("发送语音")
			},
			ly() {
				console.log("录音")
				this.yykk = true
			},
			qk() {
				this.list = [];
				this.hflist = [];
			},

			fs() {
				let arr = ["你好", "快递还没到", "快递正在运输中", "快递马上就到了", "快递正在快马加鞭的运输中"]
				let index = Math.floor(Math.random() * (4 - 0) + 0)
				this.list.unshift(this.msg)
				this.hflist.unshift(arr[index])
			},



			startRecord() {
				console.log('开始录音');
				recorderManager.start();
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
			},
			playVoice() {
				console.log('播放录音');
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			}
		},
		onLoad() {
			let self = this;
			recorderManager.onStop(function(res) {
				console.log(res.tempFilePath)
				this.lywj = res.tempFilePath
				self.voicePath = res.tempFilePath;
			});
		},
		created() {

		}
	}
</script>

<style lang="scss">
	.fsyy {
		width: 150px;
	}

	.yyk button {
		width: 130px;
		height: 30px;
		line-height: 30px;
		float: left;
		text-align: center;
	}

	.yyk {
		width: 100vw;
		height: 10vh;
		background: red;
	}

	input {
		width: 50vw;
		border: 3px solid #ccc;
	}

	button {
		width: 20vw;
		height: 5vh;
		border: 3px solid #ccc;
		display: flex;
		align-items: center;
	}

	.ltk {
		width: 100vw;
		height: 80vh;
		display: flex;

	}

	.lltk {
		width: 50vw;
		height: 80vh;
		overflow-y: auto;
	}

	.rltk {
		width: 50vw;
		height: 80vh;
		overflow-y: auto;
	}

	.srk {
		width: 100vw;
		height: 20vh;
		display: flex;
	}

	.kfym {
		width: 100vw;
		height: 100vh;
	}
</style>